<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery被卷去头部方法</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
    <!-- <style>
        .box{
            position: re;
        }
    </style> -->
</head>
<body>
    <div>
        <div class="box"></div>
    </div>
    <script>
        $(function(){
            $('*').css({'margin': 0, 'padding': 0});
            $('.box').parent().css({
                'width': 1080,
                'height': 3000,
                'margin':'0 auto',
                'position':'relative'
            });
            $('.box').css({
                'position':'absolute',
                'top': 1000,
                'left': 500,
                'width': 150,
                'height': 150,
                'background-color':'red',
                'display':'none'
            });
            $(window).scroll(function(){
                //打印被卷去的头部的高度
                // console.log($(window).scrollTop());
                //打印盒子距离文档顶部的距离
                console.log('盒子'+ $('.box').offset().top);
                //打印文档距离浏览器顶部的距离
                console.log($(document).scrollTop());
                if($(document).scrollTop() >= $('.box').offset().top){
                    // $('.box').show();
                    var a = $(document).scrollTop() >= $('.box').offset().top?true:false;
                    console.log(a);
                }
            })
        })
    </script>
</body>
</html>